<template>
  <div class="catesubject">
    <div class="goods_group">
      <!-- {{filteredMenuItems.cat_name}} -->
      <div class="goods_titie" v-for="(item1, index) in getMenuItems" :key="index">
        <div v-for="(item2, subIndex) in item1.children" :key="subIndex">
          /{{ item2.cat_name}}/

          <div>
            <div  v-for="(item1, index) in getMenuItems" :key="index">
              <div class="goods_list" v-for="(item2, subIndex) in item1.children" :key="subIndex">
                <div class="goods_lists" v-for="(item3, subIndex2) in item2.children" :key="subIndex2" >         
                  <img :src="item3.cat_icon" alt=""> 
                  {{ item3.cat_name }}
                </div>
              </div>
            </div>
          </div>


        </div>
      </div>

    </div>
  </div>
</template>

<script>


export default {
  name: 'cateSubject',
  props:["menuItems","selectedItemId"],
  data() {
    return {
     
    };
  },

  created() {
    // console.log(this.menuItems);
    // console.log( this.selectedItemId);
  },

  computed: {
    getMenuItems() {
  const menuItemsIndexMap = {
    1: 0,
    55: 1,
    71: 2,
    172: 3,
    266: 4,
    321: 5,
    356: 6,
    406: 7,
    455: 8,
    492: 9,
    511: 10,
    543: 11,
    591: 12,
    709: 13,
    852: 14,
    889: 15,
    912: 16,
    948: 17,
    962: 18,
    995: 19,
    1106: 20,
    1163: 21,
    1219: 22,
    1292: 23,
    1330: 24,
    1372: 25,
    1402: 26,
    1441: 27,
  };
  const index = menuItemsIndexMap[this.selectedItemId];
  if (typeof index !== 'undefined') {
    return this.menuItems.slice(index, index + 1);
  } else {
    // 如果selectedItemId不匹配上述条件，返回一个空数组或其他默认值
    return [];
  }
}
  },
}
</script>

<style scoped>

.catesubject {
  /* background-color: aquamarine; */
  /* height: 100%; */
  display: flex;
}

.goods_titie {
  text-align: center;
  width: 100%;
}

.goods_list {
  /* 添加一个padding给goods_list以避免内容直接贴边 */
  padding: 0 10px;
 display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 水平平分空间，两端对齐 */
  
}

.goods_lists {
  /* 使用flex布局，并允许子元素换行 */
 margin: 5px; /* 根据需要调整边距 */
  width: 80px;
}

.goods_lists > div>div{
  /* 为了自动换行，不要在这里设置宽度 */
  
}

.goods_lists img {
  width: 100%; /* 图片宽度设置为100%，高度会自适应 */
  max-width: 100px; /* 根据需要设置最大宽度，保证图片不会过大 */
  height: auto; /* 高度自适应 */
  display: block; /* 避免图片下方出现空白 */
}

</style>